<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-row>
        <el-col :span="10">
          <el-button class="filter-item" size="small" style="margin-left: 10px;" type="primary" v-waves
                     @click="deliveryConfirmation" icon="el-icon-check">发运确认
          </el-button>
        </el-col>
        <el-col :span="14" style="text-align: right">
          <el-input size="small" style="width: 200px" class="filter-item more-search" placeholder="订单号-回车查询"
                        v-model="listQuery.condition.cusOrderNo"
                        @keyup.enter.native="searchClick"></el-input>
          <el-button class="filter-item" size="small" type="primary" v-waves icon="el-icon-circle-plus-outline"
                     @click="moreClick">更多
          </el-button>
          <el-dropdown trigger="click" :hide-on-click=false style="float: right;margin-left: 10px">
            <span class="el-dropdown-link">
              <el-button class="filter-item" size="small" type="primary" v-waves>
                选择列
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-checkbox-group v-model="theadCheckVal">
                  <el-checkbox label="shipmentGid">指令号</el-checkbox>
                  <el-checkbox label="cusWaybillNo">运单号</el-checkbox>
                  <el-checkbox label="cusOrderNo">订单号</el-checkbox>
                  <el-checkbox label="vin">车架号</el-checkbox>
                  <el-checkbox label="vin">板车号</el-checkbox>
                  <el-checkbox label="releaseStatus">状态</el-checkbox>
                  <el-checkbox label="driverName">司机名称</el-checkbox>
                  <el-checkbox label="driverPhone">司机联系电话</el-checkbox>
                  <el-checkbox label="serviceProviderName">分供方</el-checkbox>
                  <el-checkbox label="customerId">客户名称</el-checkbox>
                  <el-checkbox label="originLocationName">起始地</el-checkbox>
                  <el-checkbox label="destName">目的地</el-checkbox>
                  <el-checkbox label="isUrgent">是否急发</el-checkbox>
                  <el-checkbox label="expcetShipDate">计划发运时间</el-checkbox>
                  <el-checkbox label="orderTime">实际发运时间</el-checkbox>
                </el-checkbox-group>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
      <div style="clean:both"></div>
    </div>
    <div v-show="searchFlag"  style="height: auto;margin-top: 10px;">
      <el-form ref="form" :model="listQuery.condition" label-width="100px" :inline="true">
        <el-form-item label="车架号:">
          <el-input type="textarea" :rows="2" style="width: 220px"
                    v-model="listQuery.condition.vin"  placeholder="请输入车架号"></el-input>
          <!--<el-input placeholder="请输入车架号" class="w200" clearable v-model="listQuery.condition.vinNo"></el-input>-->
        </el-form-item>
        <el-form-item label="系统运单号">
          <el-input type="textarea" :rows="2" style="width: 220px"
                    v-model="listQuery.condition.releaseGid"  placeholder="请输入系统运单号"></el-input>
        </el-form-item>
        <el-form-item label="指令号:">
          <el-input type="textarea" :rows="2" style="width: 220px"
                    v-model="listQuery.condition.shipmentGid"  placeholder="请输入指令号"></el-input>
        </el-form-item>
        <el-form-item label="客户运单号">
          <el-input type="textarea" :rows="2" style="width: 220px"
                    v-model="listQuery.condition.cusWayBillNo"  placeholder="请输入客户运单号"></el-input>
        </el-form-item>
        <el-form-item label="是否发运">
          <el-select v-model="listQuery.condition.shipType" placeholder="发运状态"  style="width: 184px">
            <el-option label="未选择" value=""></el-option>
            <el-option label="已发运" value="1"></el-option>
            <el-option label="未发运" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否急发">
          <el-select v-model="listQuery.condition.isUrgent" placeholder="急发状态"  style="width: 184px">
            <el-option key="1" label="是" value="YES"></el-option>
            <el-option key="2" label="否" value="NO"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label=板车号:>
          <el-input placeholder="请输入板车号" class="w200" clearable v-model="listQuery.condition.plateNumber"></el-input>
        </el-form-item>
        <el-form-item label=客户名称:>
          <el-input placeholder="请输入客户名称" class="w200" clearable v-model="listQuery.condition.customerId"></el-input>
        </el-form-item>
        <el-form-item label="发运时间:">
          <el-date-picker class="w200" v-model="listQuery.condition.startDate" type="datetime" placeholder="选择日期时间"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          align="right" :picker-options="timePicker"></el-date-picker>
          <span class="zhi-font">至</span>
          <el-date-picker class="w200" v-model="listQuery.condition.endDate" type="datetime" placeholder="选择日期时间"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          align="right" :picker-options="timePicker"></el-date-picker>
        </el-form-item>
        <el-form-item label="指令创建时间:">
          <el-date-picker class="w200" v-model="listQuery.condition.shipStartDate" type="datetime" placeholder="选择日期时间"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          align="right" :picker-options="timePicker"></el-date-picker>
          <span class="zhi-font">至</span>
          <el-date-picker class="w200" v-model="listQuery.condition.shipEndDate" type="datetime" placeholder="选择日期时间"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          align="right" :picker-options="timePicker"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchClick" style="margin-left: 10px">查询</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="clean:both"></div>
    <el-table ref="paymentTable" :data="paymentList" v-loading="listLoading" element-loading-text="加载中" border fit
              highlight-current-row style="width: 100%;margin-top:5px" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column :key="key" align="center" :width="value.width" v-for='(value,key) in tableThead'
                       :label="value.title">
        <template slot-scope="scope">
          <div v-if="value.key === 'releaseStatus'">{{scope.row[value.key] | shipStatusFilter}}</div>
          <div v-else-if="value.key === 'shipStatus'">{{scope.row[value.key] | shipStatus2Filter}}</div>
          <div v-else-if="value.key === 'onlStatus'">{{scope.row[value.key] | noticeLineStatusFilter}}</div>
          <div v-else-if="value.key === 'isUrgent'">{{scope.row[value.key] | yesOrNoFilter}}</div>
          <div v-else>{{scope.row[value.key]}}</div>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="listQuery.current" :page-sizes="[10,20,30,50]" :page-size="listQuery.size"
                     layout="total, sizes, prev, pager, next, jumper" :total="listQuery.total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import * as outboundShipAPI from '@/api/outbound/outboundShip'
  import waves from '@/directive/waves' // 水波纹指令
  const defautlTableThead = [
    { key: 'shipmentGid', title: '指令号', width: '140' },
    { key: 'releaseGid', title: '系统运单号', width: '140' },
    { key: 'cusWaybillNo', title: '客户运单号', width: '140' },
    { key: 'cusOrderNo', title: '客户订单号', width: '140' },
    { key: 'vin', title: '车架号', width: 180 },
    { key: 'plateNumber', title: '板车号', width: '140' },
    { key: 'releaseStatus', title: '订单状态', width: '' },
    { key: 'shipStatus', title: '是否发运', width: '' },
    { key: 'driverName', title: '司机名称', width: '140' },
    { key: 'driverPhone', title: '司机联系电话', width: '140' },
    { key: 'serviceProviderName', title: '分供方', width: '140' },
    { key: 'customerId', title: '客户名称', width: '140' },
    { key: 'originLocationName', title: '起始地', width: '' },
    { key: 'destName', title: '目的地', width: 250 },
    { key: 'isUrgent', title: '是否急发', width: '' },
    { key: 'expcetShipDate', title: '计划发运时间', width: '140' },
    { key: 'realShipDate', title: '发运时间', width: '140' },
    { key: 'gmtCreate', title: '指令创建时间', width: '140' }
  ]
  export default {
    name: 'payment',
    directives: {
      waves
    },
    data() {
      return {
        theadCheckVal: [
          'cusWaybillNo',
          'cusOrderNo',
          'shipmentGid',
          'vin',
          'plateNumber',
          'releaseStatus',
          'originLocationName',
          'destName', 'driverName', 'driverPhone', 'serviceProviderName', 'customerId',
          'isUrgent',
          'expcetShipDate',
          'orderTime'
        ],
        tableThead: defautlTableThead,
        search: {},
        listQuery: {
          current: 1,
          size: 10,
          total: 0,
          condition: {
            shipStartDate: '', customerId: '', plateNumber: '',
            shipEndDate: '',
            releaseGid: '',
            vin: '',
            shipmentGid: '',
            cusWayBillNo: '',
            shipType: ''
          }
        },
        // selectReleaseStatusList: [{ label: '已发运', value: 'BS_DISPATCH' }, { label: '未发运', value: 'BS_CREATED' }],
        paymentList: [],
        listLoading: true,
        downloadLoading: false,
        downloadData: [],
        multipleSelection: [],
        searchFlag: true,
        timePicker: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }]
        }
      }
    },
    created() {
      this.list()
    },
    watch: {
      theadCheckVal(valArr) {
        this.tableThead = defautlTableThead.filter(v => {
          for (let i = 0; i < valArr.length; i++) {
            if (v.key === valArr[i]) {
              return v
            }
          }
        })
      }
    },
    methods: {
      list() {
        // 列表查询
        this.$data.listLoading = true
        // 处理是否展开更多
        let queryParam = {}
        if (this.$data.searchFlag) {
          queryParam = this.$data.listQuery
        } else {
          Object.assign(queryParam, this.$data.listQuery)
          queryParam.condition = {
            cusOrderNo: this.$data.listQuery.condition.cusOrderNo
          }
        }
        // if (!queryParam.condition.releaseStatus) {
        //   queryParam.condition.releaseStatus = 'BS_CREATED  '
        // }
        outboundShipAPI.queryNewChannelReleaseList(queryParam).then(result => {
          if (result.code === 0) {
            this.$data.paymentList = result.data.records
            this.$data.listQuery.total = result.data.total
          } else {
            this.$notify({
              title: '信息提示',
              message: result.message,
              type: 'error',
              duration: 2000
            })
          }
          this.$data.listLoading = false
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
      deliveryConfirmation() {
        this.$confirm('确认对选中项目做发运确认?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.shipConfirm()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作',
            duration: 2000
          })
        })
      },
      shipConfirm() {
        const that = this
        const selectIds = []
        console.log('that', that.multipleSelection)
        for (let i = 0; i < that.multipleSelection.length; i++) {
          selectIds.push(that.multipleSelection[i].id)
        }
        const ids = selectIds.join(',')
        const param = {
          key: ids
        }
        this.listLoading = true
        outboundShipAPI.despatchNewChannel(param).then(result => {
          that.listLoading = false
          if (result.code === 0) {
            this.$message({
              message: '发运确认成功！',
              type: 'info',
              duration: 2000
            })
            this.list()
          }
        }).catch(() => {
          that.listLoading = false
        })
      },
       // 明细列表-列选中
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      handleSizeChange(val) {
        // 分页size变化
        this.$data.listQuery.size = val
        this.list()
      },
      handleCurrentChange(val) {
        // 分页当前页变化
        this.$data.listQuery.current = val
        this.list()
      },
      moreClick() {
        // 更多click
        this.$data.searchFlag = !this.$data.searchFlag
      },
      searchClick() {
        // 搜索
        this.list()
      },
      reset() {
        this.$data.listQuery.condition = {
          // houseId: this.$store.getters.currentStorehouse.id,
          // releaseStatus: 'BS_DISPATCH',
          shipType: '', customerId: '', plateNumber: '',
          cusOrderNo: null,
          startDate: null,
          endDate: null,
          releaseGid: '',
          vin: '',
          shipStartDate: '',
          shipEndDate: '',
          shipmentGid: '',
          cusWayBillNo: ''
        }
        this.list()
      }
    }
  }
</script>
<style scoped>

</style>
